//var canvas = new Canvas(HTMLElementCanvas, function() {
var canvas = new Canvas("id", function() {
	//handler executed when DOM is ready
	
	//object is accessible thru variable rectangle
	var rectangle = this.rect({
		width: 100,
		height: 100
	}) //creates a rectangle with 100x100 dimension
	.pos(20, 20) //sets rectangle position to [20, 20]
	.show(); //makes rectangle visible
	//.show(20, 20); //shows object at specified coordinates ???
	
	var rectHeight = rectangle.attr("height"); //returns value of rectangle's attribut
	
	rectangle.attr("height", 150); //changes one rectangle attribut
	rectangle.attr({
		x: 50,
		y: 100,
		width: 50
	}); //changes multiple rectangle attributes at once
	
	/*
	 * Attribute list:
	 * x - x-coordinate
	 * y - y-coordinate
	 * xOrigin - x-coordinate of object's origin
	 * yOrigin - y-coordinate of object's origin
	 * width - objects width
	 * height - objects height
	 * fill
	 */
	
	rectangle.hide(); //hides rectangle, while it remains accessible
	rectangle.remove(); //removes rectangle, variable rectangle now points to empty object
	
	//object is not accessible - i.e. if it is drawn, it stays on the canvas for good
	this.circle({
		width: 100,
		fill: "red",
		x: 100,
		y: 100
	}).show();
	
	//object is accessible thru its ID or thru group
	//if group with specified identifier does not exist, new one is created,
	//accessible thru this identifier
	this.rect({
		id: "rectangle",
		group: "group" //group ID as string or group object
	});
	
	var rec = this.get("rectangle"); //gets reference to rectangle and stores it in variable rec
	
	this.get("group").show(); //makes visible all objects in group
	
	this.get("group").each(function() {
		//executes operation on every object in group
		//this references to the object
		
		this.attr("width", 2 * this.attr("width")); //doubles object's width
	});
	
	this.get("group").remove(); //removes all objects in group, also removes group itself
	this.get("group").ungroup(); //removes all objects from the group and deletes the group; does not remove objects; i.e. set objects' attribute group to false/null
	
	this.all(); //returns group object containing all canvas objects
}, function() {
	//handler executed on error
});

canvas.ready(function() {
	//handler exexuted when DOM is ready, if DOM is already loaded, code is executed immediatelly
});

canvas.clear(); //clears whole canvas - makes all objects hidden
canvas.clear(true); //clears whole canvas - removes all objects
